<template>
  <div class="item_list">
    <van-tabs v-model="navActive"
              @click="handleTabClick">
      <van-tab v-for="(nav, index) in navList"
               :title="nav.name"
               :key="index">
        <van-list v-model="loading"
                  :finished="finished"
                  :immediate-check="false"
                  finished-text="没有更多了"
                  @load="getGoodsList">
          <div class="h">
            <div class="name">{{currentCategory.name}}</div>
            <div class="desc">{{currentCategory.desc}}</div>
          </div>
          <van-card v-for="(item, i) in goodsList"
                    :key="i"
                    :desc="item.brief"
                    :title="item.name"
                    :thumb="item.picUrl"
                    :price="item.retailPrice"
                    :origin-price="item.counterPrice"
                    @click="itemClick(item.id)"/>
        </van-list>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import {goodsCategory, goodsList} from '@/api/api';
  import {Card, List, Tab, Tabs} from 'vant';

  export default {
    name: 'Item-list',
    props: {
      itemClass: {
        type: [String, Number],
        default: ''
      }
    },

    data() {
      return {
        categoryId: this.itemClass,
        goodsList: [],
        page: 0,
        limit: 10,
        currentCategory: {},
        navList: [],
        navActive: 0,
        loading: false,
        finished: false
      };
    },

    created() {
      this.init();
    },

    methods: {
      handleTabClick(index) {
        this.categoryId = this.navList[index].id;
        this.$router.replace({
          name: 'category',
          query: {itemClass: this.categoryId}
        });
        this.init();
      },
      init() {
        goodsCategory({id: this.categoryId}).then(res => {
          this.navList = res.data.data.brotherCategory;
          this.currentCategory = res.data.data.currentCategory;

          // 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
          if (res.data.data.parentCategory.id == this.categoryId) {
            this.categoryId = res.data.data.currentCategory.id;
          }

          for (let i = 0; i < this.navList.length; i++) {
            if (this.navList[i].id == this.categoryId) {
              this.navActive = i;
              break;
            }
          }
          this.page = 0;
          this.goodsList = [];
          this.getGoodsList();
        });
      },
      getGoodsList() {
        this.page++;
        goodsList({
          categoryId: this.categoryId,
          page: this.page,
          limit: this.limit
        }).then(res => {
          this.goodsList.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        });
      },
      itemClick(id) {
        this.$router.push(`/items/detail/${id}`);
      }
    },

    components: {
      [List.name]: List,
      [Card.name]: Card,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs
    }
  };
</script>

<style lang="scss" scoped>
  .item_list {
    background-color: #fff;
  }

  .h {
    height: 100px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .h .name {
    display: block;
    height: 30px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
  }

  .h .desc {
    display: block;
    height: 24px;
    font-size: 16px;
    color: #999;
  }
</style>
